<template>
<!-- 直播数据分析 5 33 -->
  <div id="liveData">
    <div v-if="vipRootObj[5][28].owner">
      <div class="videoBox1">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/dataimg.png" alt="" />
            <span>数据概况</span>
          </div>
          <radio_group01
            v-model="dateTime01"
            class="mr_16"
            :radio_values="['昨天', '近7天', '30天']"
          />
        </div>
        <div class="theDataBox" v-if="finishData01">
          <div class="theDataItem">
            <p>{{ format_num(dataObj.liveNum) }}</p>
            <p>直播带货场次</p>
          </div>
          <div class="theDataItem">
            <p>{{ dataObj.avglooktime }}</p>
            <p>场均直播时长</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataObj.peoplepeak) }}</p>
            <p>观看人数峰值</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataObj.livePro) }}</p>
            <p>关联商品数</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataObj.avgVolume) }}</p>
            <p>场均销量</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataObj.avgAmount) }}</p>
            <p>场均销售额</p>
          </div>
        </div>
      </div>
      <!-- 柱状图 -->
      <div class="BarBox" v-if="finishBar && Oftenpush[0].length != 0">
        <div class="BarItem">
          <div class="titleBox">
            <img src="@/assets/meng/video03_01.png" alt="" />
            <span>常推商品类目TOP5</span>
          </div>
          <div class="chartBox">
            <DetailsBar
              :starXData="Oftenpush[1]"
              :starYData="Oftenpush[0]"
              v-if="finishBar && Oftenpush[0].length != 0"
            />
            <div
              v-loading="!finishBar"
              v-if="!finishBar"
              class="loading loading01"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div
              v-if="finishBar && Oftenpush[0].length == 0"
              class="noDataNoticewl noData"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
        <div class="BarItem">
          <div class="titleBox">
            <img src="@/assets/meng/hot_analyse04.png" alt="" />
            <span>热销商品类目TOP5</span>
          </div>
          <div class="chartBox">
            <DetailsBar
              :starXData="Hotsale[1]"
              :starYData="Hotsale[0]"
              v-if="finishBar && Hotsale[0].length != 0"
            />
            <div
              v-loading="!finishBar"
              v-if="!finishBar"
              class="loading loading01"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div
              v-if="finishBar && Hotsale[0].length == 0"
              class="noDataNoticewl noData"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
      </div>
      <!-- 折线图 -->
      <div class="lineChartBox">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="@/assets/meng/hot_analyse05.png" alt="" />
            <span>关联直播场次趋势图</span>
          </div>
          <radio_group01
            v-model="dateTime02"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <div class="lineChart">
          <lineChart
            :xData="lineXData01"
            :yData="livenumList[0]"
            name1="关联直播场次"
            v-if="finishLine01 && livenumList[1].length != 0"
          />
          <div
            v-loading="!finishLine01"
            v-if="!finishLine01"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishLine01 && livenumList[1].length == 0"
            class="noDataNoticewl noData01"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <div class="lineChartBox" v-if="finishLine02 && lineXData02.length != 0">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="@/assets/meng/video04_02.png" alt="" />
            <span>观看人数趋势图</span>
          </div>
          <radio_group01
            v-model="dateTime03"
            class="mr_16"
            :radio_values="['近7天', '30天']"
          />
        </div>
        <div class="lineChart">
          <lineChart
            :xData="lineXData02"
            :yData="livepeoList[0]"
            name1="观看人数"
            v-if="finishLine02 && lineXData02.length != 0"
          />
          <div
            v-loading="!finishLine02"
            v-if="!finishLine02"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishLine02 && lineXData02.length == 0"
            class="noDataNoticewl noData01"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/liveGoodsData.jpg'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="liveGoodsData" :lowestVipNum="vipRootObj[5][28].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import DetailsBar from "@/pages/wang/talent/tdetails/component/DetailsBar";
import lineChart from "@/pages/wang/video/component/lineChart.vue";
export default {
  name: "",
  components: { DetailsBar, lineChart },
  data() {
    return {
      dateTime01: "近7天",
      dataObj: {},
      finishData01: false,

      //   常推商品类目TOP5
      Oftenpush: [],
      Hotsale: [],
      finishBar: false,
      //   折线
      dateTime02: "近7天",
      dateTime03: "近7天",
      livenumList: [],
      lineXData01: [],
      finishLine01: false,
      livepeoList: [],
      lineXData02: [],
      finishLine02: false,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {
    dateTime01: function (newVal, oldVal) {
      this.finishData01 = false;
      this.finishBar = false;
      this.getData();
      this.getBarData();
    },
    dateTime02: function (newVal, oldVal) {
      this.finishLine01 = false;
      this.getLineData01();
    },
    dateTime03: function (newVal, oldVal) {
      this.finishLine02 = false;
      this.getLineData02();
    },
  },
  created() {
    if (this.vipRootObj[5][28].owner) {
      this.getData();
      this.getBarData();
      this.getLineData01();
      this.getLineData02();
    }
  },
  mounted() {},

  methods: {
    // 获取数据
    getData() {
      let that = this;
      // 1 7 30 90
      let time01 = "7";
      if (that.dateTime01 == "昨天") {
        time01 = "1";
      } else if (that.dateTime01 == "近7天") {
        time01 = "7";
      } else if (that.dateTime01 == "30天") {
        time01 = "30";
      } else if (that.dateTime01 == "90天") {
        time01 = "90";
      }
      that.$axios
        .get(
          "/api/live/dataanalysis",
          {
            params: {
              authorId: that.$route.params.id,
              day: time01,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.dataObj = res.data.data;
            that.finishData01 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 柱状图
    getBarData() {
      let that = this;
      // 1 7 30 90
      let time01 = "7";
      if (that.dateTime01 == "昨天") {
        time01 = "1";
      } else if (that.dateTime01 == "近7天") {
        time01 = "7";
      } else if (that.dateTime01 == "30天") {
        time01 = "30";
      } else if (that.dateTime01 == "90天") {
        time01 = "90";
      }
      that.$axios
        .get(
          "/api/live/procolumnar",
          {
            params: {
              authorId: that.$route.params.id,
              day: time01,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.Oftenpush = res.data.data.oftenpush;
            that.Hotsale = res.data.data.hotsale;
            that.finishBar = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 折线图01
    getLineData01() {
      let that = this;
      // 1 7 30 90
      let time01 = "7";
      if (that.dateTime02 == "近7天") {
        time01 = "7";
      } else if (that.dateTime02 == "30天") {
        time01 = "30";
      } else if (that.dateTime02 == "90天") {
        time01 = "90";
      }
      that.$axios
        .get(
          "/api/live/livenum",
          {
            params: {
              authorId: that.$route.params.id,
              day: time01,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.lineXData01 = [];
            that.livenumList = res.data.data;
            that.livenumList[1].forEach((element) => {
              that.lineXData01.push(that.timestamp(element, "M/D"));
              return that.lineXData01;
            });
            that.finishLine01 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 折线图02
    getLineData02() {
      let that = this;
      // 1 7 30 90
      let time01 = "7";
      if (that.dateTime03 == "近7天") {
        time01 = "7";
      } else if (that.dateTime03 == "30天") {
        time01 = "30";
      } else if (that.dateTime03 == "90天") {
        time01 = "90";
      }
      that.$axios
        .get(
          "/api/live/livepeo",
          {
            params: {
              authorId: that.$route.params.id,
              day: time01,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.lineXData02 = [];
            that.livepeoList = res.data.data;
            that.livepeoList[1].forEach((element) => {
              that.lineXData02.push(that.timestamp(element, "M/D"));
              return that.lineXData02;
            });
            that.finishLine02 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#liveData {
  .chartTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 43px;
  }
  .titleBox {
    img {
      margin-left: 0;
    }
  }
  .loading01 {
    margin-top: 100px;
  }
  // 数据概况
  .videoBox1 {
    .theDataBox {
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      border: solid 1px #e5e5e5;
      border: dashed 1px #e5e5e5;
      box-sizing: border-box;
      padding: 47px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 39px;

      .theDataItem {
        flex: 1;
        text-align: center;
        border-right: dashed 1px #e5e5e5;

        p:nth-of-type(1) {
          color: #222222;
          font-size: 26px;
          font-family: DINAlternate-Bold;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          color: #888888;
          font-family: DINAlternate-Bold;
          padding-top: 3px;
        }
      }

      .theDataItem:last-child {
        border-right: none;
      }
    }
  }
  //   柱状图
  .BarBox {
    margin-top: 50px;
    display: flex;
    .BarItem {
      width: 50%;
    }
    .chartBox {
      width: 100%;
      height: 352px;
    }
  }
  .noData {
    line-height: 352px !important;
  }
  .noData01 {
    line-height: 455px !important;
  }
  .lineChart {
    width: 100%;
    height: 455px;
  }
}
</style>